<template>
  <div style="padding-bottom: 45px">
<!--    头部-->
    <van-nav-bar
        title="分类"
        left-arrow
        swipeable
        lazy-render
        @click-left="onClickLeft"
        border
    />
    <!--    搜素-->
    <router-link to="/search" tag="div" class="searchBox">
      <van-search shape="round" background="#EC0D0D" placeholder="搜索商品-好货等你" />
    </router-link>
<!--    tab切换-->
    <van-tabs animated @click="onClick" v-model="activeName" ref="tabTitle"  sticky>
      <van-tab v-for="(item,index) in classList" :title="item.name" :key="index" :name="item.categoryId" :to="{path:'/index/classify',query:{id:item.categoryId}}">
        <!--        切换内容-->
        <div v-if="showFlag" style="padding:20px;">
          <van-skeleton title :row="3" class="flexBox" style="width: 100%;padding:20px 0;" v-for="item in 10" :key="item"/>
        </div>
        <!--        触底加载-->

        <van-list v-else class="flexBox" v-model="loading" :finished="finished" finished-text="不要再往下划了啦" @load="onLoad">
          <!--        商品-->
          <GoodBlock :showLoadFlag="showLoadFlag" :item="item" v-for="item in goodRenderList" :key="item.goodsId" class="animate__animated animate__bounceIn"></GoodBlock>
        </van-list>
        <router-view></router-view>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import {getGoodsList, shopCategory} from "@/api/api";
import img1 from '@/assets/animal.jpg'
import GoodBlock from "@/components/Index/GoodBlock";
  export default{
    name:"Classify",
    components:{
      GoodBlock,
    },
    data() {
      return {
        activeName:'0',
        showFlag:true,
        classList:[{categoryId: 1,name:'食品'},{categoryId: 3,name:'饮料'},{categoryId: 4,name:'文具'},{categoryId: 5,name:'衣服'},{categoryId: 6,name:'二手'},{categoryId: 7,name:'其他'},{categoryId: 8,name:'日用品'},{categoryId: 9,name:'鞋靴'},{categoryId: 10,name:'宠物交易'},],
        goodRenderList:[],
        img1,
        showLoadFlag:true,
      //  触底加载
        list: [],
        loading: false,
        finished: false,
      };
    },
    methods:{
      onClickLeft(){
        this.$router.push({path:'/index'})
      },
      showContent(id){
        this.showFlag = true
        getGoodsList('',1,10,id).then(res=>{
          this.goodRenderList=res.data.rows
          if(this.goodRenderList.length%2!=0){
            this.goodRenderList.push({coverImgUrl:this.img1,price:'0.00',intro:'敬請期待！'})
          }
          this.showFlag = false
        })
      },
      onClick(name,title){
        console.log(this.activeName)
        console.log(name)
        console.log(title)
        this.showContent(name)
      },

    //  触底加载
      onLoad() {
        // 异步更新数据
        // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < this.goodRenderList; i++) {
            this.goodRenderList.push(this.goodRenderList.length + 1);
          }

          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.goodRenderList.length >= 8) {
            this.finished = true;
          }
        }, 1000);
      },

    },
    created() {
      console.log(this.$route.query.id)
      if(this.$route.query.id){
        this.activeName = Number(this.$route.query.id)
        console.log(this.activeName)
        this.onClick(this.activeName)
      }else{
        this.onClick(1)
      }
      //分类列表
      shopCategory().then(res=>{
        this.classList = res.data.rows
        this.showLoadFlag = false
      })
      this.$store.commit('changeNav',2)
    },
  }
</script>

<style scoped lang="less">
.flexBox{
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding: 0 10px;
}
/deep/.van-tab__pane-wrapper{
  background-color: #f5f5f5;
}
/deep/.van-list__finished-text{
  width: 100%;
}
</style>